<template>
  <div class="bi-fuzzy-search">
    <InputSearch @search="onSearch" :inputText="textActive" />
    <el-scrollbar style="height: 100%">
      <div class="screen-list" v-show="dataList.length > 0">
        <div class="screen-view" v-for="(item, index) in dataList" :key="index">
          <p v-if="Array.isArray(item) === false" @click="onQuery(item)">
            {{ item }}
          </p>
          <span class="screen-child" v-else @click="onQuery(item)">
            <span
              :style="{
                color: itemText === textActive ? '#165DFF' : '#1D2129',
              }"
              v-for="(itemText, indexText) in item"
              :key="index + '' + indexText"
              >{{ itemText }}</span
            >
          </span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import InputSearch from "@/components/bi-input-search/index";
name: "BiFuzzySearch";
const props = defineProps({
  oneColumnList: {
    type: Array,
    required: false,
    default: () => {
      return [];
    },
  },
});
const textActive = ref("");
const dataList = ref([]);
const emit = defineEmits(["handelQuery", "handelSearch"]);
dataList.value = props.oneColumnList;
const onSearch = (val, type) => {
  if (type === "search") {
    emit("handelSearch", val?.value || "");
  } else if (type === "enter") {
    if (val.value) {
      onQuery(val.value);
    }
    // onQuery(val.value);
  } else {
    if (val.value) {
      textActive.value = val.value;
      dataList.value = screenListFilter(val.value);
    } else {
      dataList.value = props.oneColumnList;
    }
  }
};
const screenListFilter = (value) => {
  let arr = [];
  props.oneColumnList.filter((item) => {
    if (item.includes(value) === true) {
      let r = item.replace(value, `-${value}-`).split("-");
      arr.push(
        r.filter((s) => {
          return s && s.trim();
        })
      );
    }
  });
  return arr;
};
const onQuery = (text) => {
  if (Array.isArray(text) === false) {
    textActive.value = text;
  } else {
    textActive.value = text.join("");
  }
  emit("handelQuery", textActive.value);
};

watch(
  () => props.oneColumnList,
  (nv) => {
    dataList.value = nv;
  }
);
</script>
<style lang="scss">
@import "@/assets/styles/index.scss";
.bi-fuzzy-search {
  .screen-list {
    min-height: 2.5rem;
    max-height: 3rem;
    padding: 0.08rem 0;
    display: flex;
    flex-direction: column;
    .screen-view {
      height: 0.34rem;
      display: flex;
      align-items: center;
      border-radius: 0.03rem;
      &:hover {
        background: #f2f3f5;
        cursor: pointer;
      }
      P {
        height: 0.26rem;
        @include overflowEllipsis;
      }
      .screen-child {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        @include overflowEllipsis;
      }
    }
  }
}
</style>